<script>
  import $ from 'dfish-widget'
  import Widget from '../Widget.vue'
  import form from '../widget.form.js'
  import input from '../widget.form.input.js'
  import src from '../widget.src.js'

  export default {
    mixins: [Widget],
    data() {
      return {
        name: 'Fileupload',
        remark: '上传附件',
        deprecate: 'placeholder,src,validate-default',
        extends: [form, input, src],
        attrs: [
          {
            name: 'check-file',
            type: 'Function',
            remark: '自定义上传文件校验方法。如果校验成功，无需返回；如果校验失败，返回错误信息字符串。',
            option: '(file: File, uploadFiles: Array, fileList: Array, valueList: Array)',
          },{
            name: 'download-src',
            type: 'String',
            remark: '下载地址。支持 $xxx 变量(值取自value)。download-src比click:item优先级低。'
          },
          {
            name: 'upload-src',
            type: 'String',
            remark: '上传地址',
          },
          {
            name: 'thumbnail-src',
            type: 'String',
            remark: '缩略图地址。支持 $xxx 变量(值取自value)',
          },
          {
            name: 'upload-limit',
            type: 'Number',
            remark: '最多可上传数量',
          },
          {
            name: 'file-types',
            type: 'String',
            remark: '允许的文件类型',
            option: `<div><var>audio</var>: 音频; <var>image</var>: 图片; <var>video</var>: 视频</div>
              <div>可用分号隔开的文件后缀名，例如 <var>*.jpg;*.gif;*.png</var></div>`,
          },
          {
            name: 'max-file-size',
            type: 'String',
            remark: '单个附件最大的文件大小',
            option: '单位: T, G, M, K, B。例如 <var>50M</var>',
          },
          {
            name: 'min-file-size',
            type: 'String',
            remark: '单个附件最小的文件大小',
            option: '单位: T, G, M, K, B。例如 <var>1B</var>',
          },
          {
            name: 'success',
            remark: 'upload-src数据加载成功后触发',
          },
          {
            name: 'filter',
            remark: 'upload-src数据的过滤函数。需要返回数据对象格式：<var>{id, name}</var>',
            option: `<div><var>id</var>: 文件编号, <var>name</var>: 文件名称</div>`
          },
          {
            name: 'error',
            remark: 'upload-src数据加载失败时后触发',
          },
          {
            name: 'complete',
            remark: 'upload-src请求完成后触发。不论请求成功失败都会执行',
          },
          {
            name: 'item-width',
            type: 'Number',
            remark: '单个附件项的宽度',
          },
          {
            name: 'vertical',
            type: 'Boolean',
            remark: '是否垂直布局显示文件列表',
            default: 'true'
          },
          {
            name: 'model-value / v-model',
            type: 'Object / Array',
            remark: "表单值。多个值可用数组。值的格式: <var>{id, name}</var>",
            option: `<div><var>id</var>: 文件编号, <var>name</var>: 文件名称</div>`
          },
        ],
        events: [{
          name: 'click:item',
          remark: '点击附件时触发。click:item比download-src优先，如果设置了click:item，则download-src无效。',
          option: '(event: Event, value: Object, valueList: Array)',
        }],
        methods: [{
          name: 'chooseFile()',
          remark: '选择文件',
          option: '',
          default: ''
        }],
        slots: [{
          name: 'button',
          remark: '上传按钮',
          option: 'w-button',
          props: '{chooseFile}',
        }, {
          name: 'menu',
          remark: '附件的下拉菜单',
          option: 'w-button',
          props: '{item}',
        }],
        examples: [{
          remark: '给附件增加下拉选项',
          type: 'html',
          view: true,
          code: `
            <template>
              <w-fileupload name="file" :model-value="fileList">
                <template #menu="{item}">
                  <w-button text="预览" @click="preview(item)"></w-button>
                  <w-button text="下载" @click="download(item)"></w-button>
               </template>
              </w-fileupload>
            </template>
            <${'script'}>
              export default {
                data() {
                  return {
                    fileList: [
                      {id: '001', name: '官方文档.doc'}
                    ]
                  }
                },
                methods: {
                  preview(file) {
                    alert(\`预览 \${file.name}\`)
                  },
                  download(file) {
                    alert(\`下载 \${file.name}\`)
                  },
                }
              }
            </${'script'}>
            `,
          comp: {
            data() {
              return {
                fileList: [
                  {id: '001', name: '官方文档.doc'}
                ]
              }
            },
            methods: {
              preview(file) {
                console.log(file)
                alert(`预览 ${file.name}`)
              },
              download(file) {
                alert(`下载 ${file.name}`)
              },
            }
          }
        },
        ]
      }
    }
  }
</script>

<style>
</style>
